//柱状图组件
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

//1.把功能代码都放入
//2.把可变的部分抽象成prop参数


const BatChart=({title})=>{
    const chartRef = useRef(null)
        useEffect(()=>{
            //保证dom可用，才进行图表的渲染
            //1.使用react的操作替换操作原生dom
            const chartDom = chartRef.current
            //2.图表初始化生成实例对象
            var myChart = echarts.init(chartDom);
            //3.准备图表参数
            var option = {
                title:{
                    text:title
                },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
                }
            ]
            };
            //4.使用图表参数完成图表的渲染
            option && myChart.setOption(option);
        },[])
    return <div ref={chartRef} style={{width:'500px', height: '400px'}}></div>
}
export default BatChart